<script>
import request from "@/utils/request.js";
import {Comment} from "@element-plus/icons-vue";

export default {
  components: {Comment},
  data() {
    return {
      entity: {},
      collectionList: [{}],
      comment: {},
      commentList: [{}],
      isFocus:false
    }
  },
  methods: {
    getArticle(id) {
      request.get("/article/" + id).then(res => {
        if (res.code === '0') {
          this.entity = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    getCollectionList() {
      request.get('/cc').then(res => {
        this.collectionList = res.data
      })
    },
    getComment(id) {
      request.get('/comment/list/' + id).then(res => {
        this.commentList = res.data
      })
    },
    handleComment() {
      if (!this.comment.content) {
        this.$message.error('评论内容不能为空')
      } else {
        this.comment.articleId = localStorage.getItem("articleId");
        this.comment.userId = JSON.parse(localStorage.getItem("user")).id
        request.post('/comment', this.comment).then(res => {
          if (res.code === '0') {
            this.$message.success(res.msg)
            this.getComment(localStorage.getItem("articleId"))
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },
  },
  created() {
    if (localStorage.getItem("articleId")) {
      this.getCollectionList();
      this.getArticle(localStorage.getItem("articleId"));
      this.getComment(localStorage.getItem("articleId"));
    } else {
      this.$message.error('文章不存在')
      this.$router.push('/')
    }
  }
}
</script>

<template>
  <el-card style="margin-top: 10px" shadow="hover">
    <h1 v-html="this.entity.title?this.entity.title:''" style="display: flex;justify-content: center">
    </h1>
    <el-space  style="display: flex;justify-content: center">
      <span>作者&nbsp;:&nbsp;{{ entity.authorName }}</span>
      <span>合集&nbsp;:&nbsp;{{
          this.entity.collectionId ? this.collectionList.find(item => item.id === this.entity.collectionId).name : '无'
        }}</span>
      <span>发布时间&nbsp;:&nbsp;{{
          /**格式化**/
          new Date(entity.publishTime).toLocaleString()
        }}</span>
    </el-space>
    <p v-html="this.entity.description?this.entity.description:''">
    </p>
    <el-divider/>
    <div v-html="this.entity.content?this.entity.content:'正文'">
    </div>
    <div style="display: flex;justify-content: center">
      <span>End</span>
    </div>
    <div>
      <el-button type="text" @click="()=>{this.$message.success('点赞成功')}">点赞</el-button>
      <el-button type="text" @click="()=>{this.$message.success('收藏成功')}">收藏</el-button>
      <el-button type="text" @click="()=>{this.$message.success('分享成功')}">分享</el-button>
      <el-button type="text" @click="()=>{this.$message.success('举报成功')}">举报</el-button>
      <el-button type="text" @click="()=>{this.$refs.comment.focus()}">评论</el-button>
    </div>
    <el-divider></el-divider>
    <div class="comment-list" v-if="commentList.length!==0">
      <el-row v-for="item in commentList">
        <el-col :span="24">
          <article class="comment-item">
            <header class="comment-header">
              <el-avatar :src="item.avatar" :size="30"></el-avatar>
              <h5 class="comment-nickname">{{ item.nickname }}</h5>
            </header>
            <main class="comment-content">
              {{ item.content }}
            </main>
            <footer class="comment-footer">
              <p class="comment-time">{{ new Date(item.commentTime).toLocaleString() }}</p>
<!--              <div class="comment-actions">-->
<!--                <el-button type="text" @click="handleSubmit" class="action-button">-->
<!--                  <el-icon><Comment /></el-icon>&nbsp;回复-->
<!--                </el-button>-->
<!--              </div>-->
            </footer>
          </article>
        </el-col>
      </el-row>
    </div>
    <div v-else>
      <div style="display: flex;justify-content: center">
        <el-button type="text" size="large" @click="()=>{this.$refs.comment.focus()}">去评论</el-button>
      </div>
    </div>
  </el-card>
  <!--    评论-->
  <el-card style="width: 400px;margin-top: 20px" shadow="never">
    <el-form v-model="comment">
      <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="comment.content"
          ref="comment"
      >
      </el-input>
      <el-button type="primary" style="margin-top: 10px;margin-left: 120px;width: 100px" @click="handleComment">发表</el-button>
    </el-form>
  </el-card>
</template>

<style scoped>
/* Add your preferred CSS framework or normalize.css here for a consistent base styling */

/* Comment list styles */
.comment-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Comment item styles */
.comment-item {
  background-color: #f8f8f8;
  border-radius: 6px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Comment header styles */
.comment-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.comment-nickname {
  margin: 0;
  font-weight: bold;
}

/* Comment content styles */
.comment-content {
  margin-top: 0.5rem;
}

/* Comment footer styles */
.comment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
}

.comment-time {
  color: #999;
  font-size: 0.9em;
}

/* Action buttons styles */
.action-button {
  display: flex;
  align-items: center;
  gap: 0.25rem;

  /* Replace the following with actual icon classes from your chosen icon library */
  .icon-like,
  .icon-reply {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-position: center;
  }
}
</style>